<template>
  <div class="flex dirc alc juc">
    <img :src="qrcodeDataURL" alt="二维码" />
    <p class="p10">请用手机扫码，签字提交后，完成设计确认</p>
  </div>
</template>

<script lang="ts" setup>
import QRCode from "qrcode";
import { encryptDES } from "@/utils/des";
import { Auth } from "@/utils/auth";

// 接收父组件
const props = defineProps<{
  id: string;
}>();

const paramStr = computed(() => {
  const param = {
    id: props.id,
    type: "designSign",
    token: Auth.getAccessToken(),
  };
  const jsonString = JSON.stringify(param);
  return encryptDES(jsonString);
});

const qrcodeDataURL = ref(""); //二维码图片地址
const qrcodeText = ref(
  window.location.origin + "/#/signature?key=" + encodeURIComponent(paramStr.value)
);

onMounted(() => {
  console.log(qrcodeText.value);
  // 生成二维码
  const param = {
    width: 200,
    height: 200,
    correctLevel: "M",
  };
  QRCode.toDataURL(qrcodeText.value, param)
    .then((url: string) => {
      qrcodeDataURL.value = url;
    })
    .catch((error: any) => {
      console.error(error);
    });
});
</script>

<style lang="scss" scoped></style>
